<template>
<div class="row" v-if="list">
<div v-for="item in list" :key="item._id" class="col-4 shadow-lg p-3 mb-5 bg-white rounded clearfix mb-4">
<img :src='item.avatar&& item.avatar.url'>
<div> {{item.title}}</div>
<router-link :to="{name: 'Column',params: {id:item._id}}">进入专栏</router-link>
</div>
</div>
</template>

<script lang='ts'>
import { defineComponent, PropType } from 'vue'
// import { ColumnProps } from '../store'
interface Image {
    _id?: string;
    url?: string;
    createdId?: number;
}
export interface Column {
    _id: string;
    title: string;
    description: string;
    avatar: Image;
}
export default defineComponent({
  name: 'ColumnList',

  props: {
    list: {
      type: Array as PropType <Column[]>,
      require: true
    }

  }
  // setup (props) {
  //   const ColumnList = computed(() => {
  //     return props.list.map(column => {
  //       column.avatar.url = column.avatar.url + '?x-oss-process=image/resize,h_100,m_lfit'
  //     })
  //   })
  // }
})
</script>

<style>
.row img {
height: 100px;
width: 100px;
}
.row{
  margin-right: 0px;
  margin-left:0px ;
}
</style>
